<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份:<select name="" onchange="changep();" id="phph">
			<option value="-1">请选择省份</option>
		</select>
		城市:<select name="" onchange="changec();" id="citys">
			<option value="-1">请选择城市</option>
		</select>
		区县:<select name="" onchange="changed();" id="xian">
			<option value="-1">请选择区县</option>
		</select>
		<br/>
		你选择的是:<label id="ab1"></label>
	</body>
	<script type="text/javascript">
                var p=['福建','浙江','江苏'];
				var citya=[['莆田','厦门','福州'],['温州','杭州','宁波'],['南京','苏州']];
				var d=[
					[['荔城区','仙游县'],['思明区','同安区'],['长乐区','马尾区']],
					[['江南皮革厂','瑞安'],['余杭','临海']
					,['镇海','江北']],[['玄武','秦淮'],['姑苏区','昆山市']]];
				var phphObj = document.getElementById('phph');
				var cityObj = document.getElementById('citys');
				var xians = document.getElementById('xian');
				function changep(){
					
					var city = citya[phphObj.value];
					console.log(city)
					cityObj.innerHTML = `<option value="-1">请选择城市</option>`;
					if(phphObj.value==-1){
						return;//重置
					}
					for(var i=0;i<city.length;i++) {
						  cityObj.innerHTML+=`<option value="`+i+`">`+city[i]+`</option>`;
					}
				}
				function changec(){
					var  xian1 = d[phphObj.value][cityObj.value];
					xians.innerHTML = `<option value="-1">请选择区县</option>`;
					if(cityObj.value==-1){
						return;//重置
					}
					for(var i=0;i<xian1.length;i++){
						xians.innerHTML+=`<option value="`+i+`">`+xian1[i]+`</option>`;
					}
				}
				
				onload = function (){
					var phphObj = document.getElementById('phph');
					for(var i= 0; i<p.length; i++){
						phphObj.innerHTML+=`<option value="`+i+`">`+p[i]+`</option>`;
						console.log(p[i])
						
					}
				}
				function changed(){
					var id=document.getElementById('phph');
					var idd=document.getElementById('citys');
					var iddd=document.getElementById('xian');
					document.getElementById('ab1').innerText=id.options[id.selectedIndex].text+
					'-'+idd.options[idd.selectedIndex].text+'-'+iddd.options[iddd.selectedIndex].text;
				}
	</script>
</html>
